<template>
  <div class="basetable" element-loading-text="拼命加载中">
    <!-- v-loading 设置加载 -->
    <div class="selectMenu">
      <!-- 点击触发add方法 -->
      <span class="spansearch">姓名</span>
        <el-input
        size="small"
          placeholder="姓名搜索"
          style="width:350px;margin-left: 16px;"
          @input="searchClick"
          clearable
          v-model="input1"
        >
        </el-input>
    </div>
    <div class="tableMain">
      <el-table :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
      style="width: 100%">
      <el-table-column type="index" width="150" label="序号"></el-table-column>
        <el-table-column prop="nickname" label="姓名" width="180"></el-table-column>
        <el-table-column prop="username" label="用户名" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 点击编辑进入编辑页面进行编辑表格数据 -->
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">选择录入员</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.nickname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="分配录入员" :visible.sync="dialogFormVisibleedit">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth" >
          <el-input v-model="form.nickname" auto-complete="off" style="width:50%;"></el-input>
        </el-form-item>
      </el-form>

      <el-form :model="form">
        <el-form-item label="选择录入员" :label-width="formLabelWidth">
          <el-select multiple v-model="value" placeholder="请选择" @change="select($event)">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canceledit">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="updateedit">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 25, 50,100]" 
      :page-size="pagesize"         
      layout="total, sizes, prev, pager, next, jumper"
      :total="userList.length">    
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage:1, //初始页
      pagesize:10,    //    每页的数据
      userList: [],
      dialogFormVisible: false,
      dialogFormVisibleedit: false,
      formLabelWidth: "100px",
      // 设置form用于进行添加的时候绑定值
      form: {},
      value6: "",
      currentPage3: 1,
      currentIndex: "",
      options: [],
      value: "",
      luruyuanid: "",
      idxiangmu: "",

      dialogVisibleAudit: false, //我的审核弹窗
      waitDelTraineeList: [], //删除待审核列表"
      waitToTraineeList: [], //编辑待审核列表
      activeName: "first", //切换

      input1: "" //搜索
    };
  },
  created() {
    this.directorlists();
    // this.adminenter();
    this.updateTrainee();
  },
  methods: {
     // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
    //未分配录入员
    select(e) {
      let a =e.join(",")
      this.luruyuanid = a;
      console.log("this.luruyuanid",this.luruyuanid);
    },
    //
    //项目主任列表
    async directorlists() {
      let a = (await this.$api.home.projectMan()).data.data;
      this.userList = a;
    },
    // 增加数据的方式，单独的设置一些值，用于增加功能，这些值放在对象里面进行设置，然后将这个新增的对象塞到总数据里面
    add() {
      this.form = {
        date: "",
        name: "",
        region: "",
        address: ""
      };
      //   设置点击按钮之后进行显示对话框
      this.dialogFormVisible = true;
    },
    update() {
      this.userList.push(this.form);
      this.dialogFormVisible = false;
    },
    //分配录入员
    async updateedit() {
      if(this.luruyuanid == ""){
        this.$notify.error({
          title: "错误",
          message: "录入员不能为空",
        });
      }else{
        let luru = (        
        await this.$api.home.toMan({
          project_id: this.idxiangmu,
          admin_id: this.luruyuanid
        })
      ).data;
      if(luru.code == 200){
        this.$notify({
          title: "成功",
          message: luru.msg,
          type: "success",
        });
        console.log("luru", luru);
      this.dialogFormVisibleedit = false;
      }else{
        this.$notify.error({
          title: "错误",
          message: luru.msg,
        });
      }
      }
      // this.tableData.push(this.form);
      
    },
    async handleEdit(index, row) {
      this.idxiangmu = row.id;
      // 将数据的index传递过来用于实现数据的回显
      this.form = this.userList[index];
      this.currentIndex = index;
      // 设置对话框的可见
      this.dialogFormVisibleedit = true;
      let man = (await this.$api.home.enterMan()).data.data;
      this.options = man;
    },
    handleDelete(index, row) {
      // 设置类似于console类型的功能
      this.$confirm("永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
          this.userList.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    },
    canceledit() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisibleedit = false;
    },

    //我的审核
    audit() {
      this.dialogVisibleAudit = true;
      this.Delete();
      // this.Edit();
    },
    // 删除
    async Delete() {
      let waitDelTrainee = await this.$api.home.waitDelTrainee();
      if (waitDelTrainee.data.code == 200) {
        this.waitDelTraineeList = waitDelTrainee.data.data;
      }
    },
    //同意删除
    delClick(value) {
      const params = {
        user_id: value.id
      };
      this.$confirm("此操作将永久删除该学员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let delTrainee = await this.$api.home.delTrainee(params);
          if (delTrainee.data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.Delete()
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //学员修改待确认列表
    async updateTrainee(){
      let edit = (await this.$api.home.updateTrainee()).data.data
      this.waitToTraineeList = edit
    },

    //同意编辑
    editClick(value) {
      console.log("value.id",value.id);
      const params = {
        user_id: value.id
      };
      this.$confirm("此操作将同意学员信息修改, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let delTrainee = await this.$api.home.upTrainee(params);
          if (delTrainee.data.code == 200) {
            this.$message({
              type: "success",
              message: "审核成功!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审核"
          });
        });
      console.log(value);
    },

    //搜索
    searchClick() {
      let searchText = this.input1;
      let list = [];
      if (searchText) {
        list = this.userList.filter(e => {
          return e.username.match(searchText);
        });
        this.userList = list;
      } else {
        this.directorlists();;
      }
    }
  }
};
</script>
<style lang="less" scope>
.tableMain {
  margin-top: 10px;
}
//搜索框文字
 .spansearch{
   color: #409EFF;
   font-size: 15px;
   margin-left: 20px;
 }

.page {
  float: left;
  margin-top: 10px;
}

.el-input--suffix {
  .el-input-group__append {
    border-color: #1890ff;
    .btnSearch {
      background: #1890ff;
      color: #fff;
      border-radius: 0;
    }
  }
}
</style>